<template>
  <div class="component-projectList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>服开系统
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="component_btnGroup">
      <el-button-group>
        <el-button
          @click="handleClick('first')"
          :style="chooseBtn=='first'?'color:#fff;background:#1abc9c;':'color:#666;background:#fff;'"
        >服开系统</el-button>
        <el-button
          @click="handleClick('second')"
          :style="chooseBtn=='second'?'color:#fff;background:#1abc9c;':'color:#666;background:#fff;'"
        >管线系统</el-button>
        <el-button
          @click="handleClick('third')"
          :style="chooseBtn=='third'?'color:#fff;background:#1abc9c;':'color:#666;background:#fff;'"
        >呈现系统</el-button>
      </el-button-group>
    </div>
    <div>
      <div class="component-searchHeader">
        <div class="search-header">
          <div class="left-title">
            <p class="left-text">
              <span class="iconfont" style="font-weight:700">&#xe63d;</span>筛选查询
            </p>
            <div class="right">
              <button @click="searchInfo()">查询</button>
            </div>
          </div>
        </div>
      </div>

      <div class="component-search-box">
        <el-form :inline="true" :model="projectSearch" label-width="110px" class="demo-form-inline">
          <el-form-item label="服开单号：" style="width:330px;">
            <!-- <el-input
              v-model="projectSearch.info"
              placeholder="输入服开单号"
              :fetch-suggestions="querySearch"
              clearable
              style="width:217px;"
            ></el-input>-->
            <el-autocomplete
              class="inline-input"
              v-model="projectSearch.openNumber"
              :fetch-suggestions="querySearch"
              placeholder="输入服开单号"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="项目名称：" style="width:330px;">
            <el-input
              v-model="projectSearch.proName"
              placeholder="输入项目名称"
              clearable
              style="width:217px;"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="component-listHeader">
        <div class="search-header">
          <div class="left-title">
            <p class="left-text">
              <span class="iconfont">&#xe61e;</span>
              数据列表
            </p>
            <div class="right">
              <!-- <button @click="input" style="width:100px;" v-show="ms_roleName == 'ProjectClerk'">导入工单</button> -->
            </div>
          </div>
        </div>
      </div>

      <div class="table">
        <el-table
          ref="multipleTable"
          :data="projectInfo"
          tooltip-effect="dark"
          style="width: 1100px;margin:0 auto"
          border
        >
          <el-table-column label="服开单号" align="center" width="200" prop="openNumber"></el-table-column>
          <el-table-column label="项目名称" align="center" width="170" prop="proName"></el-table-column>
          <el-table-column label="项目地址" align="center" width="300" prop="proAddr"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                @click="$router.push({name:'getServerOpen',query:{proId:scope.row.proId}})"
                v-if="chooseBtn == 'first'"
                type="text"
                size="small"
                class="red"
              >获取服开信息</el-button>
              <el-button
                @click="$router.push({name:'gjResTable',query:{proId:scope.row.proId}})"
                v-if="chooseBtn == 'first'"
                type="text"
                size="small"
                class="red"
              >生成资料</el-button>
              <el-button
                @click="archive(scope.row.proId)"
                v-if="chooseBtn == 'first'"
                type="text"
                size="small"
                class="red"
              >服开归档</el-button>
              <el-button
                @click="$router.push({name:'gjInformation',query:{proId:scope.row.proId}})"
                v-if="chooseBtn == 'second'"
                type="text"
                size="small"
                class="red"
              >汇聚光交信息</el-button>
              <el-button
                @click="downloadPaper(scope.row.fileUrl)"
                v-if="chooseBtn == 'second'"
                type="text"
                size="small"
                class="red"
              >竣工图纸下载</el-button>
              <el-button
                @click="$router.push({name:'coordinateInfo',query:{proId:scope.row.proId}})"
                v-if="chooseBtn == 'third'"
                type="text"
                size="small"
                class="red"
              >获取协调单信息</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="component-paging" v-show="projectInfo.length>0">
        <div class="table-bottom">
          <div class="bottom-left"></div>
          <div class="paging">
            <div class="paging-left">
              <p>
                共
                <span>{{Math.ceil(Page.RowCount/Page.PageSize)}}</span> 页/
                <span>{{Page.RowCount}}</span> 条数据
              </p>
            </div>
            <el-pagination
              background
              @size-change="SizeChange($event,projectInit,Page.CurrentPage,Page.PageSize)"
              @current-change="CurrentChange($event,projectInit,Page.CurrentPage,Page.PageSize)"
              :current-page.sync="Page.CurrentPage"
              :page-sizes="[10, 20, 30 ,50 ,100]"
              :page-size.sync="Page.PageSize"
              layout="sizes, prev, pager, next, jumper"
              :total="Page.RowCount"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "projectList",
  data() {
    return {
      ms_roleName: localStorage.getItem("roleName"),
      baseUrl: img_url,
      //按钮组的选中值
      chooseBtn: "first",
      //搜索框的值
      projectSearch: {
        proName: "",
        openNumber: ""
      },
      //table数据
      projectInfo: [{}],
      Page: {
        RowCount: 1,
        CurrentPage: 1,
        PageSize: 10
      },
      // 当前的输入建议
      currentList: [],
      // 完整的输入建议
      suggests: []
    };
  },
  methods: {
    //标签页切换
    handleClick(active) {
      this.Page = {
        RowCount: 1,
        CurrentPage: 1,
        PageSize: 10
      };
      this.projectSearch = {};
      // 当选项卡切换的时候重置分页部分数据和条件查询，然后判断切换的哪一个标签页，来判断应该传什么状态像后端发起请求
      switch (active) {
        case "first":
          break;
        case "second":
          break;
        case "third":
          break;
      }
      this.chooseBtn = active;
      // this.projectInit();
    },
    // 组件查询建议 函数
    querySearch(queryString, cb) {
      var suggests = this.suggests;
      var results = queryString
        ? suggests.filter(this.createFilter(queryString))
        : suggests;
      // 调用 callback 返回建议列表的数据
      cb(results);
      console.log(results);
    },
    // 组件查询建议 过滤 函数
    createFilter(queryString) {
      return suggests => {
        return (
          suggests.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    // 返回当前选中建议
    handleSelect(item) {
      console.log(item);
    },
    //输入建议-查询
    suggestsInfo() {
      let that = this,
        suCb = res => {
          console.log("输入建议查询结果：", res);
          that.suggests = res.data.data;
          if (res.data.data.length > 0) {
            that.suggests.map(item => {
              return (item.value = item.openNumber);
            });
          }
          console.log(that.suggests);
        },
        erCb = res => {},
        req = {
          url: "/api/web/cmccClerk/getAllOpenNumber",
          methods: "post",
          data: {},
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 查询按钮
    searchInfo() {
      this.Page.CurrentPage = 1;
      this.projectInit();
    },
    //项目列表-查询
    projectInit() {
      let that = this,
        suCb = res => {
          console.log("项目列表查询结果：", res);
          that.projectInfo = that.deepClone(res.data.data.list);
          that.Page.RowCount = res.data.data.rowCount;
        },
        erCb = res => {},
        params = {
          pageCurrent: that.Page.CurrentPage,
          pageSize: that.Page.PageSize,
          openNumber: that.projectSearch.openNumber,
          proName: that.projectSearch.proName
        },
        req = {
          url: "/api/web/cmccClerk/getProjectList",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
      console.log("项目列表查询参数：", params);
      that.$https(req);
    },
    // 归档按钮
    archive(id) {
      let that = this,
        suCb = res => {
          console.log("归档结果：", res);
          that.$msg("归档成功");
          that.projectInit();
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/changeProgress",
          methods: "post",
          data: { proId: id, proProgress: "7" },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    // 竣工图纸下载
    downloadPaper(url) {
      let a = document.createElement("a");
      a.href = this.baseUrl + url;
      a.download = "终版竣工图";
      a.target = "_blank";
      a.click();
    }
  },
  created() {
    this.projectInit();
    this.suggestsInfo();
  }
};
</script>

<style scoped>
.component-projectList .tabs-header {
  width: 1150px;
  box-sizing: border-box;
  margin: 20px auto 0;
}

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  padding: 0 25px;
  height: 30px;
  margin: 8px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
}
.component-search-box {
  width: 1100px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
  padding-bottom: 15px;
  padding-top: 15px;
}
.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}
.el-form-item {
  margin-bottom: 0;
}
.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  border-bottom: none;
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  line-height: 45px;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 70%;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 110px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #1abc9c;
  background-color: #fff;
  border: 1px solid #ccc;
}
.el-form-item {
  width: 310px;
}
.component-listHeader .search-header .right button:hover {
  background-color: #1abc9c;
  color: #fff;
}
.component-listHeader .search-header .right .right-select-margin {
  margin-top: 8px;
  margin-right: 8px;
}
/* 删除按钮 */
.red {
  color: #48c9b0;
  font-size: 12px;
}

/* 下载列表 */
.download-list {
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.download-list > div:first-child {
  width: 25%;
}

.download-list > div:first-child > span {
  width: 100%;
  padding-right: 10px;
  font-size: 14px;
  text-align: right;
}

.component-models .el-form-item {
  width: 512px;
  margin-bottom: 10px;
}
.component-models .el-select {
  left: -50px;
}

.el-textarea {
  display: block;
  margin-top: 13px;
}

.component_btnGroup {
  margin: 20px auto 0;
  text-align: left;
  width: 1100px;
}

.errorWarning {
  margin-left: 15px;
  color: #f00;
  font-size: 18px;
  font-weight: 600;
}
</style>

